<template>
  <div class="detail-box w-card">
    <div class="content-box">
      <div class="title-box">
        <span>商品详情</span>
        <!-- <el-button style="margin-left:auto;" @click="backHandle">信息维护记录</el-button> -->
        <el-button style="margin-left:auto;" @click="lookGoods">预览商品</el-button>
        <el-button @click="editGoods">编辑商品信息</el-button>
      </div>
      <div class="info-box">
        <div class="info-title">商品基本信息</div>
        <div class="row-box">
          <div>
            <span>商品名称：</span>
            <span>{{ detailForm.goodsName || '' }}</span>
          </div>
          <div>
            <span>商品ID：</span>
            <span>{{ detailForm.goodsId || '' }}</span>
          </div>
          <div>
            <span>商品状态：</span>
            <span
              :class="'state-box'+detailForm.finalStatus">{{ detailForm.finalStatus == 0 ? '下架' : detailForm.finalStatus == 1 ? '销售中' : '' }}</span>
          </div>
        </div>
        <div class="row-box">
          <div>
            <span>商品品牌：</span>
            <span>{{ detailForm.brandName || '' }}</span>
          </div>
          <div>
            <span>商品分类：</span>
            <span>{{ detailForm.categoryName || '' }}</span>
          </div>
          <div>
            <span>商品类型：</span>
            <span>{{ detailForm.typeName || '' }}</span>
          </div>
        </div>
        <div class="row-box">
          <div>
            <span>标签：</span>
            <span>{{ detailForm.tag || '' }}</span>
          </div>
          <div>
            <span>上架时间：</span>
            <span>{{ detailForm.createTime ? getDateTime(detailForm.createTime)[6] : '' }}</span>
          </div>
          <div>
            <span>操作人：</span>
            <span>{{ detailForm.createUserName || '' }}</span>
          </div>
        </div>
        <div class="row-box">
          <div v-show="detailForm.rechargeTypeName">
            <span>充值类型：</span>
            <span>{{ detailForm.rechargeTypeName || '' }}</span>
          </div>
        </div>
        <div class="info-title">生产定义</div>
        <div class="row-box">
          <div>
            <span>生产方式：</span>
            <span>{{ detailForm.produceMode == 1 ? '手动生产' : detailForm.produceMode == 2 ? '自动生产' : '' }}</span>
          </div>
        </div>
        <div class="row-box" style="flex-flow: column;gap: 20px;">
          <div style="width: 100%;flex-flow: column;" v-for="item in detailForm?.channelProductList" :key="item">
            <div>
              <span>上游平台：</span>
              <span>{{ item.channelName }}</span>
            </div>
            <div>
              <span>上游商品：</span>
              <span>{{ item.productName }}</span>
            </div>
          </div>
        </div>
        <div class="info-title">商品价格信息</div>
        <div class="row-box">
          <div>
            <span>官方价(元)：</span>
            <span>{{ numFormat(accDiv((detailForm.officialPrice || 0),10000)) || '' }}</span>
          </div>
          <div>
            <span>成本价(元)：</span>
            <span>{{ numFormat(accDiv((detailForm.costPrice || 0),10000)) || '' }}</span>
          </div>
          <div>
            <span>折扣价(元)：</span>
            <span>{{ numFormat(accDiv((detailForm.discountPrice || 0),10000)) || '' }}</span>
          </div>
          <div>
            <span>建议价(元)：</span>
            <span>{{ numFormat(accDiv((detailForm.suggestPrice || 0),10000)) || '' }}</span>
          </div>
        </div>
        <div v-show="detailForm.costPriceShop && (detailForm.costPriceShop.length > 0)" class="info-title">特殊商户商品成本价价格信息</div>
        <div v-show="detailForm.costPriceShop && (detailForm.costPriceShop.length > 0)" class="row-box">
          <div v-for="item in detailForm.costPriceShop" :key="item">
            <span>{{ item.shopName }}：</span>
            <span>{{ item.price }}元</span>
          </div>
        </div>
        <div v-show="detailForm.discountPriceShop && (detailForm.discountPriceShop.length > 0)" class="info-title">特殊商户商品折扣价价格信息
        </div>
        <div v-show="detailForm.discountPriceShop && (detailForm.discountPriceShop.length > 0)" class="row-box">
          <div v-for="item in detailForm.discountPriceShop" :key="item">
            <span>{{ item.shopName }}：</span>
            <span>{{ item.price }}元</span>
          </div>
        </div>
        <div class="info-title">商品详细信息</div>
        <div class="row-box">
          <div>
            <span>商品主图：</span>
            <img :src="detailForm.headImg" alt="">
          </div>
        </div>
        <div>
          <div>
            <span>商品详情：</span>
            <div class="vhtml-box" v-html="detailForm.goodsDetail"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <look-goods ref="lookGoodsRef" />
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { warningDeal, getDateTime, numFormat, accDiv } from '@/utils/utils'
import lookGoods from '@/components/lookGoods.vue'
import api from './api'
export default {
  components: {
    lookGoods,
  },
  setup() {
    const route = useRoute()
    const router = useRouter()

    const lookGoodsRef = ref(null)

    const state = reactive({
      detailForm: {},
    })

    function editGoods() {
      router.push({ path: '/goods/edit', query: { goodsId: state.detailForm.goodsId } })
    }

    function lookGoods() {
      lookGoodsRef.value.dialogShow(1, state.detailForm.goodsId)
    }

    function getDetail(goodsId) {
      const obj = {
        goodsId
      }
      api.goodsInfoDetail(obj).then(res => {
        if (res.code == '200') {
          state.detailForm = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    onMounted(() => {
      const goodsId = route.query.goodsId
      if (goodsId) {
        getDetail(goodsId)
      }
    })

    return {
      ...toRefs(state),
      lookGoodsRef,
      editGoods,
      lookGoods,
      getDateTime,
      numFormat,
      accDiv,
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content-box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px;
    .title-box {
      font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
    .info-box {
      width: 100%;
      box-sizing: border-box;
      padding: 20px;
    }
  }
}
.info-title {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: -20px;
  padding-bottom: 10px;
  &::before {
    content: "";
    display: block;
    height: 16px;
    width: 4px;
    background-color: #0081ff;
  }
}
.row-box {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 20px;
  > div {
    width: 28%;
    display: flex;
    align-items: flex-start;
    > span:last-of-type {
      color: #8f5a5a;
    }
    > img {
      max-width: 150px;
    }
  }
}
.state-box0 {
  color: #ff3939 !important;
}
.state-box1 {
  color: #03b615 !important;
}
.vhtml-box {
  width: 100% !important;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #a5a5a5;
  margin-top: 10px;
  overflow: auto;
}
</style>
<style>
.vhtml-box img {
  max-width: 100%;
}
</style>